<template>
	<view>
		<view style="padding: 30rpx;">
			<swiper class="swiper-box" @change="change" style="height: 360rpx;">
				<swiper-item v-for="(item, index) in info" :key="index">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="item.content"></image>
					<view class="imgMask">今日推荐</view>
				</swiper-item>
			</swiper>
			<view class="dot-content">
				<view v-for="(item ,index) in info" :key="index" class="swiper-dot" :class="current === index? 'active':''">
				</view>
			</view>
		</view>
		<view class="goods-content">
			<view class="goods-name">
				{{ goods.name }}
			</view>
			<view class="goods-detail">
				{{ goods.detail }}
			</view>
		</view>
		<view class="nav-bar"></view>
		<view class="detail-content">
			<view class="detail-list" v-for="(items, index) in detail" :key="index">
				<view class="detail-name">{{ items.name }}</view>
				<view class="detail-number">{{ items.number }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				mode: 'round',
				info: [{
						content: '/static/images/BG@3x.png'
					},
					{
						content: '/static/images/BG@3x.png'
					},
					{
						content: '/static/images/BG@3x.png'
					}
				],
				goods: {
					name: '白切鸡套餐',
					detail: '精选上等叉烧250g+每日优选蔬菜，合理搭配膳食；每一份套餐，都是精选之作，给您不一样的便当体验'
				},
				detail: [{
					name: '今日补货',
					number: '180份'
				}, {
					name: '补货时间',
					number: '10:30'
				}, {
					name: '已取餐品',
					number: '90份'
				}, {
					name: '剩余餐品',
					number: '90份'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.goods-content {
		padding: 0 30rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.goods-detail {
		margin: 30rpx 0;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.nav-bar {
		width: 100%;
		height: 10rpx;
		background: rgba(245, 245, 245, 1);
	}

	.detail-content {
		padding: 0 30rpx;
	}

	.detail-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
	}

	.detail-content .detail-list:not(:last-child) {
		border-bottom: 1rpx solid #E0E0E0;
	}

	.detail-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.detail-number {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.imgMask {
		width: 104rpx;
		height: 30rpx;
		background: url("~@/static/images/tips2@3x.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		background-color: transparent;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
	}

	.swiper-dot {
		width: 10rpx;
		height: 10rpx;
		background: rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.swiper-dot.active {
		width: 30rpx;
		border-radius: 5rpx;
		background: #999999
	}

	.dot-content .swiper-dot:not(:first-child) {
		margin-left: 10rpx;
	}
</style>
